<template>
  <div class="header">
    <!-- <div class="web-logo"> -->
    <!-- <img class="img" src="../../assets/img/logo.svg" /> -->
    <!-- <el-divider></el-divider> -->
    <!-- </div> -->
    <div class="icon">
      <div class="full-top">
        <!-- 拨号 -->
        <div class="call interval" @click="handleClick('call')">
          <img class="img" src="../../assets/img/call.svg" />
          <div class="txt">{{$t('m.DIAL')}}</div>
        </div>
        <!-- <div class="trans">
        <img class="img" src="../../assets/img/trans.svg" @click="handleClick('call')" />
          <div class="txt">转接</div>
        </div>
        <div class="consult">
          <img class="img" src="../../assets/img/consult.svg" @click="handleClick('call')" />
          <div class="txt">咨询呼叫</div>
        </div>-->
        <!-- 挂断本地 -->
        <div class="hangup interval" @click="handleClick('over')">
          <img class="img" src="../../assets/img/hangup.svg" />
          <div class="txt">{{$t('m.HAND_OFF')}}</div>
        </div>
        <!-- 会议 -->
        <div class="meeting_ interval" @click="handleClick('meet')">
          <img class="img" src="../../assets/img/meeting.svg" />
          <div class="txt">{{$t('m.MEET')}}</div>
        </div>
        <!-- 通话记录 -->
        <div class="callRecord interval" @click="handleClick('callRecord')">
          <img class="img" src="../../assets/img/callRecord.svg" />
          <div class="txt">{{$t('m.CALL_RECORD')}}</div>
        </div>
        <!-- 语言 -->
        <div class="language interval" @click="handleClick('language')">
          <img class="img" src="../../assets/img/language.svg" />
          <div class="txt">{{this.$i18n.locale == 'en-US'?'Chinese':'切换英文'}}</div>
        </div>
        <!-- 开班':'关班 -->
        <div class="onDuty interval" @click="handleClick('onDuty')">
          <img class="img" :src="onDutyStatus=='login'?onDutyImg:offDutyImg" />
          <div class="txt">{{onDutyStatus=='login'?$t('m.BE_ON_DUTY'):$t('m.REST')}}</div>
        </div>
        <!-- 锁定屏幕 -->
        <div class="lock interval" @click="handleClick('lock')">
          <img class="img" src="../../assets/img/lock.svg" />
          <div class="txt">{{$t('m.SCREEN_LOCK')}}</div>
        </div>
      </div>

      <!-- 退出登录 -->
      <div class="exit" @click="handleLoginOut()">
        <img class="img" src="../../assets/img/exit.svg" />
        <div class="txt">{{$t('m.QUIT')}}</div>
      </div>
    </div>
    <!--  号码盘  -->
    <Keyboard
      ref="dialDialog"
      v-if="dialDialog"
      :currentTalkObj="currentTalkObj"
      :open.sync="dialDialog"
      @Call="handleCallMake"
    ></Keyboard>
    <call-manage v-if="callDialog" :callDialog.sync="callDialog" />
    <!-- 锁屏 -->
    <el-dialog
      :title="$t('m.SCREEN_LOCKED')"
      :visible.sync="lockDialog"
      width="400px"
      :modal="true"
      modal-append-to-body
      :append-to-body="true"
      :show-close="false"
      :close-on-click-modal="false"
      center
      style="margin-top: 10%;"
    >
      <span>{{this.$t('m.PASSWORD')}}</span>
      <el-input
        ref="lockPassWord"
        v-model="lockPassWord"
        style="width:60%;margin-left:10px;"
        clearable
        :placeholder="$t('m.tip.PLEASE_ENTER_THE_UNLOCK_PASSWORD')"
        @keyup.enter.native="handleWinLock()"
      ></el-input>
      <el-button type="primary" class="el-icon-check" @click="handleWinLock()"></el-button>
    </el-dialog>
    <!-- 快捷键组件 -->
    <!-- <Hotkeys
      @handleDialog="handleDialog"
      @handleDoCall="handleDoCall"
      @handleTurnOff="handleTurnOff"
      @handleAnswer="handleAnswer"
      @handleForce="handleForce"
    ></Hotkeys>-->
  </div>
</template>

<script>
import ConfigOption from '@/components/ConfigOption'
import { userLogout } from '@/api/user'
import { mapState } from 'vuex'
import { destroySDK } from '@/utils/SDK'
import Webrtc2Sip from '@/utils/Webrtc2Sip'
import OperatorForm from '@/components/Gis/OperatorForm'
import MenuBar from '@/components/MenuBar'
import Keyboard from '@/components/Phone/Keyboard'
import DataManage from '@/components/DataManage'
import CallManage from '@/components/DataManage/CallManage'
import Hotkeys from './Hotkeys'
export default {
  name: 'Header',
  components: {
    ConfigOption,
    OperatorForm,
    MenuBar,
    DataManage,
    Keyboard,
    CallManage,
    Hotkeys,
  },
  props: {
    currentTalkObj: Object,
  },
  computed: mapState({
    operatorInfo: (state) => state.cache.operatorInfo,
    operatorCallTels: (state) => state.cache.operatorCallTels, // 操作员手柄号码
    deviceStatusMap: (state) => state.cache.deviceStatusMap, //用户状态
    localWebSocketFlag: (state) => state.cache.localWebSocketFlag,
    websocketLocalClient: (state) => state.cache.websocketLocalClient,
    websocketClient: (state) => state.cache.websocketClient,
  }),
  data() {
    return {
      onDutyImg: require('../../assets/img/kaiban.svg'),
      offDutyImg: require('../../assets/img/guanban.svg'),
      title: projectTitle,
      userInfoDialog: false,
      // 配置选项
      openConfigOptions: false,
      menuBarDialog: false,
      currentDate: '',
      currentTime: '',
      drawer: false,
      dialDialog: false,
      lockDialog: false,
      lockPassWord: '',
      callDialog: false,
      onDutyStatus: 'stop',
    }
  },
  methods: {
    init() {
      //判断是否锁屏状态
      const lockStatus = localStorage.getItem('lockStatus')
      if (lockStatus == 1) {
        this.lockDialog = true
        this.$nextTick(() => {
          this.$refs['lockPassWord'].focus()
        })
      }
    },
    //功能
    handleClick(type) {
      switch (type) {
        case 'call':
          this.handleDialog()
          break
        case 'meet':
          this.$emit('handleOpenMeeting')
          break
        case 'over':
          this.$emit('handleClearConnection', this.operatorCallTels[0])
          break
        case 'lock':
          const lockPassWord = localStorage.getItem('lockPassWord')
          if (!lockPassWord) {
            this.$prompt(
              this.$t('m.tip.PLEASE_ENTER_THE_UNLOCK_PASSWORD'),
              this.$t('m.TIPS'),
              {
                confirmButtonText: this.$t('m.CONFIRM'),
                cancelButtonText: this.$t('m.CANCEL'),
              }
            )
              .then(({ value }) => {
                localStorage.setItem('lockPassWord', value)
                localStorage.setItem('lockStatus', 1)
                this.lockPassWord = ''
                this.lockDialog = true
                this.$nextTick(() => {
                  this.$refs['lockPassWord'].focus()
                })
              })
              .catch(() => {})
            return
          } else {
            localStorage.setItem('lockStatus', 1)
            this.lockPassWord = ''
            this.lockDialog = true
            this.$nextTick(() => {
              this.$refs['lockPassWord'].focus()
            })
          }
          break
        case 'callRecord':
          this.callDialog = true
          break
        case 'onDuty':
          this.onDutyStatus = this.operatorInfo.agentState
          this.onDutyStatus == 'login'
            ? SDK.gentWorkStop()
            : SDK.agentWorkStart()
          break
        case 'language':
          this.$i18n.locale == 'en-US'
            ? (this.$i18n.locale = 'zh-CN')
            : (this.$i18n.locale = 'en-US')
          localStorage.setItem('language', this.$i18n.locale)
          break
        default:
          break
      }
    },
    handleLangCommand(command) {
      switch (command) {
        case 'en':
          this.$i18n.locale = 'en-US'
          break
        case 'zh':
          this.$i18n.locale = 'zh-CN'
          break
        default:
          break
      }
    },
    //注销登录
    handleLoginOut() {
      if (this.operatorCallTels) {
        const status = this.deviceStatusMap.get(this.operatorCallTels[0])
        if (
          status == 'talk' ||
          status == 'allowspeak' ||
          status == 'hold' ||
          status == 'banspeak'
        ) {
          this.$message.warning(this.$t('m.NO_QUIT_RESON'))
          return
        }
      }
      this.$confirm(this.$t('m.WANT_TO_QUIT'), this.$t('m.TIPS'), {
        confirmButtonText: this.$t('m.YES'),
        cancelButtonText: this.$t('m.NO'),
        type: 'warning',
      }).then(() => {
        userLogout().then((res) => {
          if (res.data.msg == 'success') {
            sessionStorage.clear()
            destroySDK()
            //软电话登出
            Webrtc2Sip.destroy()
            //摘挂机socket退出
            if (this.localWebSocketFlag) {
              let websocketLocalClient = this.websocketLocalClient
              websocketLocalClient.onclose = (msg) => {
                Message('话务台onclose', msg)
                state.localWebSocketFlag = false
                console.log('话务台onclose', msg)
              }
            }
            let websocketClient = this.websocketClient
            if (websocketClient) {
              websocketClient.close()
            }
          } else {
            this.$Message.warning('exit error')
          }
          this.$router.push('/login')
        })
      })
    },
    //加入会议等
    handleCallMake(tel, type) {
      if (type == 'meeting') {
        this.$emit('handleCallMake', tel, type)
      }
    },
    //解锁
    handleWinLock() {
      if (this.lockPassWord == '') {
        return this.$message.warning(
          this.$t('m.tip.PLEASE_ENTER_THE_UNLOCK_PASSWORD')
        )
      }
      const lockPassWord = localStorage.getItem('lockPassWord')
      if (lockPassWord !== this.lockPassWord) {
        return this.$message.error(this.$t('m.tip.PASSWORD_ERROR'))
      }
      this.lockDialog = false
      localStorage.setItem('lockStatus', 0)
    },
    //拨号
    handleDialog() {
      this.dialDialog = true
    },
    //呼叫/转接/轮询
    handleDoCall(type) {
      this.$refs['dialDialog'].handleCall(type)
    },
    //挂断本地
    handleTurnOff() {
      this.handleClick('over')
    },
    //应答
    handleAnswer() {
      this.$emit('handleAccpet', 'accept', this.currentTalkObj.deviceTel)
    },
    //保持/解除
    handleHoldAndUn() {
      this.$emit('handleHoldCallBytel', this.currentTalkObj.deviceTel)
    },
    //监听,强拆，强插，强断
    handleForce(type) {
      makeCall({
        request: {
          '@id': '100000',
          '@type': type,
          callingDevice: this.callingDevice,
          called: { calledDevice: this.currentTalkObj.deviceTel, userID: null },
        },
      })
    },
  },
  mounted() {
    this.init()
  },
}
</script>

<style  lang="scss" scoped>
.header {
  height: 100%;
  width: 60px;
  background: linear-gradient(to bottom, #0080e6, #76adec);
  border-bottom-left-radius: 15px;
  padding-left: 5px;
  .current {
    color: white;
    text-align: center;
    border-radius: 3px;
    margin-top: 3px;
    margin-bottom: 3px;
    height: 92%;
    width: 110px;
    margin-left: auto;
    margin-right: 6%;
    cursor: pointer;
    .currentTime {
      font-size: 25px;
    }
    .currentDate {
      font-size: 13px;
    }
    .lang {
      color: white;
      text-align: center;
      margin-left: auto;
      margin-right: 1%;
      width: 110px;
      line-height: 50px;
    }
  }
  .web-logo {
    height: 10%;
  }
  .icon {
    color: white !important;
    height: 90%;
    .full-top {
      margin-top: 5px;
      height: 60%;
    }
    .txt {
      font-size: 11px;
    }
    .interval {
      margin-bottom: 3px;
    }
    .call {
      margin-top: 20px;
      .img {
        margin-left: 3px;
        width: 43px;
        height: 43px;
      }
      .txt {
        margin-left: 10px;
      }
    }
    .trans {
      .img {
        margin-left: 3px;
        width: 44px;
        height: 44px;
      }
      .txt {
        margin-left: 10px;
      }
    }
    .consult {
      .img {
        margin-left: 3px;
        width: 40px;
        height: 40px;
      }
    }
    .hangup {
      .img {
        margin-left: 3px;
        width: 42px;
        height: 42px;
      }
    }
    .meeting_ {
      .img {
        margin-left: 3px;
        width: 42px;
        height: 42px;
      }
      .txt {
        margin-left: 10px;
      }
    }
    .callRecord {
      .img {
        margin-left: 3px;
        width: 42px;
        height: 42px;
      }
    }
    .language {
      .img {
        margin-left: 3px;
        width: 42px;
        height: 42px;
      }
    }
    .onDuty {
      .img {
        margin-left: 3px;
        width: 42px;
        height: 42px;
      }
      .txt {
        margin-left: 10px;
      }
    }
    .lock {
      .img {
        width: 48px;
        height: 48px;
      }
    }
    .exit {
      position: absolute;
      bottom: 2%;
      .img {
        width: 42px;
        height: 42px;
      }
      .txt {
        margin-left: 8px;
      }
    }
  }
  /deep/.lock_drawer {
    background-color: rgba(255, 255, 255, 0.15);
    width: 100%;
    .content {
      color: black;
      .wins {
        background-color: white;
        margin-top: 200px;
        margin-left: 35%;
        width: 400px;
        height: 200px;
        border: 2px solid #6bb5e6;
      }
    }
  }
  .el-dialog__wrapper {
    z-index: 2001 !important;
  }
}

.screenFull {
  line-height: 14px;
  width: 31px;
  margin-right: 16px;
}
.project-title {
  margin-left: 5px;
}
.dropdown {
  height: 100%;
  cursor: pointer;
  .el-dropdown-menu__item {
    width: 100px;
  }
}
.el-dropdown-link {
  color: white;
  font-size: 30px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 12px;
}
.el-dropdown-link img {
  width: 40px;
  height: 40px;
}
.home {
  width: 60px;
  height: 60px;
  background-image: url('../../assets/images/Home.png');
  background-size: contain;
  position: absolute;
  right: 20px;
  top: 22px;
}
</style>
